import 'package:flutter/material.dart';
import "package:get/get.dart";
import 'package:osg/controllers/http.dart';

class Deatil extends StatefulWidget {
  @override
  CounterState createState() => CounterState();
}

class CounterState extends State<Deatil> 
with WidgetsBindingObserver {


  final articleId = Get.parameters['article_id'];
  final RxMap articleData = {}.obs;
  final RxMap sendItem = {}.obs;
  final RxList commentData = [].obs;
  final RxList images = [].obs;
  final RxInt _index = 1.obs;
  final RxString sendValue = ''.obs;

  late TextEditingController _controller;
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
     _focusNode = FocusNode();
    _controller = TextEditingController();

    WidgetsBinding.instance.addObserver(this);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      
      getdetail();
      getComment();
    });
  }

  
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);

    _focusNode.dispose();
    _controller.dispose();
    super.dispose();
  } 

  @override
  void didChangeMetrics() {
    final view = View.of(context); // 通过context获取当前View
    if (view.viewInsets.bottom == 0) {
      // 键盘已收起
      if(_controller.text.isNotEmpty&&sendItem.isNotEmpty){
      }else{
        sendItem.value={};
      }
      

      print('键盘已收起');
      // FocusManager.instance.primaryFocus?.unfocus();
    }
  }

  void _focusTextField() {
    FocusScope.of(context).requestFocus(_focusNode);
  }

  getdetail() {
    Get.find<HTTPS>()
        .getData('/bbs/articleInfo', {'article_id': '$articleId'}).then((res) {
      articleData.value = res;
      images.value = res['images'];
    });
  }

  getComment() {
    Get.find<HTTPS>().getData('/bbs/articleComment',
        {'article_id': '$articleId', 'page': '1','per_page':'999'}).then((res) {
      commentData.value = res;
    });
  }

  sendComment() {
    Get.find<HTTPS>().postData('/bbs/comment', {
      'article_id': '$articleId',
      'comment_id': sendItem['id']??'',
      'text': _controller.text
    }).then((res) {
      _controller.text='';
      sendItem.value={};
      _focusNode.unfocus();
      getComment();
    });
  }

  @override
  Widget build(BuildContext context) {
  
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xffffffff),
          centerTitle: true,
          leadingWidth: 40,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Obx(
                () => Row(
                  children: [
                    CircleAvatar(
                      radius: 15,
                      backgroundImage:NetworkImage('${articleData['headimg']}')
                      // child: Image.network(
                      //   '${articleData['headimg']}',
                      //   errorBuilder: (context, error, stackTrace) {
                      //     return Icon(Icons.person,
                      //         color: Colors.white); // 加载失败时显示默认图标
                      //   },
                      // ),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '${articleData['name']}',
                      style: TextStyle(fontSize: 14),
                    ),
                  ],
                ),
              ),
              Obx(() => articleData['is_follow'] != null &&
                      articleData['is_follow']
                  ? Container(
                      width: 50,
                      height: 25,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        color: Color(0XFFEEEEEE),
                      ),
                      child: Text(
                        '已关注',
                        style:
                            TextStyle(fontSize: 12, color: Color(0XFF999999)),
                      ),
                    )
                  : GestureDetector(
                      onTap: () {
                        Get.find<HTTPS>().postData('/bbs/follow', {
                          "follow_user_id": articleData['user_id'],
                        });
                      },
                      child: Container(
                        width: 50,
                        height: 25,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(25),
                            gradient: LinearGradient(colors: [
                              Color(0xff2189E7),
                              Color(0xffBF67F8),
                            ])),
                        child: Text(
                          '关注',
                          style:
                              TextStyle(fontSize: 12, color: Color(0XFFFFFFFF)),
                        ),
                      ),
                    ))
            ],
          ),
          leading: IconButton(
            onPressed: () {
              Get.back();
              print('object');
            },
            icon: Image.asset('static/images/back.png'),
          ),
        ),
        body: 
        GestureDetector(
          onTap: () {
            _focusNode.unfocus(); // 点击空白处取消焦点
          },
          child: Column(
          children: [
            Expanded(
              child: ListView(
                children: [
                  Stack(
                    children: [
                      Container(
                        height: 400,
                        child: Obx(() => PageView(
                                onPageChanged: (index) {
                                  _index.value = index + 1;
                                },
                                children: [
                                  for (var item in images)
                                    Image.network(item,
                                         width: double.infinity,
                                        fit: BoxFit.cover, errorBuilder:
                                            (context, error, stackTrace) {
                                      return SizedBox(
                                          width: double.infinity, height: 100);
                                    }),
                                ])),
                      ),
                      Positioned(
                          right: 10,
                          top: 10,
                          child: Container(
                            width: 50,
                            height: 25,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: Color(0XFF333333)
                                    .withValues(alpha: 0.3), // 背景色半透明
                                borderRadius: BorderRadius.circular(25)),
                            child: Obx(() => Text(
                                  '${_index.value}/${images.length}',
                                  style: TextStyle(color: Color(0XFFFFFFFF)),
                                )),
                          ))
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Obx(() => Text(
                              '${articleData['text']}',
                              style: TextStyle(fontSize: 12),
                            )),
                        Container(
                          margin: EdgeInsets.only(top: 15, bottom: 10),
                          padding: EdgeInsets.only(
                              top: 1, bottom: 1, right: 10, left: 10),
                          decoration: BoxDecoration(
                            color: Color(0xffF3EEFF),
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: Obx(() => Text(
                                '# ${articleData['topic']}',
                                style: TextStyle(fontSize: 12),
                              )),
                        ),
                        Obx(() => Text(
                              '${articleData['time']} 发布',
                              style: TextStyle(
                                  fontSize: 12, color: Color(0XFF999999)),
                            )),
                        Divider(color: Color(0XFFDDDDDD)),
                        Text(
                          '评论 ',
                          style: TextStyle(fontSize: 12),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Obx(() => Column(
                            children: commentData
                                .map(
                                  (item) => Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      CircleAvatar(
                                        radius: 12,
                                        child: Image.network(
                                            '${item['headimg']}',
                                            width: 24,
                                            height: 24,
                                            fit: BoxFit.fill, errorBuilder:
                                                (context, error, stackTrace) {
                                          return SizedBox(
                                            width: 24,
                                            height: 24,
                                          );
                                        }),
                                      ),
                                      SizedBox(
                                        width: 5,
                                      ),
                                      Expanded(
                                          child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              Text(
                                                '${item['name']}',
                                                style: TextStyle(
                                                    fontSize: 12,
                                                    color: Color(0XFF999999)),
                                              ),
                                              if(item['identity'].isNotEmpty)
                                              Container(
                                                margin:
                                                    EdgeInsets.only(left: 5),
                                                padding: EdgeInsets.symmetric(
                                                    horizontal: 5, vertical: 2),
                                                decoration: BoxDecoration(
                                                    color: Color(0XFFEEEEEE),
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            20)),
                                                child: Text(
                                                  '${item['identity']}',
                                                  style:
                                                      TextStyle(fontSize: 11),
                                                ),
                                              )
                                            ],
                                          ),
                                          SizedBox(
                                            height: 3,
                                          ),
                                          Text('${item['text']}',
                                              style: TextStyle(fontSize: 12)),
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Row(
                                            children: [
                                              if(item.isNotEmpty)
                                              Text(
                                                '${item['time']}',
                                                style: TextStyle(
                                                    fontSize: 12,
                                                    color: Color(0XFF999999)),
                                              ),
                                              SizedBox(
                                                width: 5,
                                              ),
                                              GestureDetector(
                                                onTap: () {
                                                  sendItem.value = item;
                                                  print(item);
                                                  _focusTextField();
                                                },
                                                child: Text(
                                                  '回复',
                                                  style: TextStyle(
                                                      fontSize: 12,
                                                      color: Color(0XFF0A72D9)),
                                                ),
                                              ),
                                            ],
                                          ),
                                          SizedBox(
                                            height: 15,
                                          ),
                                          for (var res in item['next'])
                                            Row(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                CircleAvatar(
                                                  radius: 12,
                                                  child: Image.network(
                                                      '${res['headimg']}',
                                                      width: 24,
                                                      height: 24,
                                                      fit: BoxFit.fill,
                                                      errorBuilder: (context,
                                                          error, stackTrace) {
                                                    return SizedBox(
                                                      width: 24,
                                                      height: 24,
                                                    );
                                                  }),
                                                ),
                                                SizedBox(
                                                  width: 5,
                                                ),
                                                Expanded(
                                                    child: Column(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    Text(
                                                      '${res['name']}',
                                                      style: TextStyle(
                                                          fontSize: 12,
                                                          color: Color(
                                                              0XFF999999)),
                                                    ),
                                                    SizedBox(
                                                      height: 3,
                                                    ),
                                                    Text('${res['text']}',
                                                        style: TextStyle(
                                                            fontSize: 12)),
                                                    SizedBox(
                                                      height: 5,
                                                    ),
                                                    Row(
                                                      children: [
                                                        Text(
                                                          '${res['created_at']}',
                                                          style: TextStyle(
                                                              fontSize: 12,
                                                              color: Color(
                                                                  0XFF999999)),
                                                        ),
                                                        SizedBox(
                                                          width: 15,
                                                        ),
                                                        Text(
                                                          '回复',
                                                          style: TextStyle(
                                                              fontSize: 12,
                                                              color: Color(
                                                                  0XFF0A72D9)),
                                                        ),
                                                        SizedBox(
                                                          width: 5,
                                                        ),

                                                        // GestureDetector(
                                                        //   onTap: () => {
                                                        //     Get.dialog(
                                                        //       AlertDialog(
                                                        //           backgroundColor:
                                                        //               Color(0xffffffff),
                                                        //           shape:
                                                        //               RoundedRectangleBorder(
                                                        //                   borderRadius:
                                                        //                       BorderRadius
                                                        //                           .circular(
                                                        //                               10)),
                                                        //           content: Container(
                                                        //             height: 120,
                                                        //             child: Column(
                                                        //               children: [
                                                        //                 SizedBox(
                                                        //                   height: 25,
                                                        //                 ),
                                                        //                 Text(
                                                        //                   '确认删除?',
                                                        //                   style: TextStyle(
                                                        //                       fontSize: 12),
                                                        //                 ),
                                                        //                 SizedBox(
                                                        //                   height: 30,
                                                        //                 ),
                                                        //                 Row(
                                                        //                   children: [
                                                        //                     Expanded(
                                                        //                         child:
                                                        //                             Container(
                                                        //                       height: 35,
                                                        //                       alignment:
                                                        //                           Alignment
                                                        //                               .center,
                                                        //                       decoration: BoxDecoration(
                                                        //                           color: Color(
                                                        //                               0XFFF5F5F5),
                                                        //                           borderRadius:
                                                        //                               BorderRadius.circular(
                                                        //                                   35)),
                                                        //                       child: Text(
                                                        //                         '确认',
                                                        //                         style: TextStyle(
                                                        //                             fontSize:
                                                        //                                 12,
                                                        //                             color: Color(
                                                        //                                 0XFFEF0000)),
                                                        //                       ),
                                                        //                     )),
                                                        //                     SizedBox(
                                                        //                       width: 15,
                                                        //                     ),
                                                        //                     Expanded(
                                                        //                       child:
                                                        //                           Container(
                                                        //                         height: 35,
                                                        //                         alignment:
                                                        //                             Alignment
                                                        //                                 .center,
                                                        //                         decoration:
                                                        //                             BoxDecoration(
                                                        //                           color: Color(
                                                        //                               0XFFF5F5F5),
                                                        //                           borderRadius:
                                                        //                               BorderRadius.circular(
                                                        //                                   35),
                                                        //                           gradient:
                                                        //                               LinearGradient(
                                                        //                             colors: [
                                                        //                               Color(
                                                        //                                   0xff2189E7),
                                                        //                               Color(
                                                        //                                   0xffBF67F8),
                                                        //                             ],
                                                        //                             begin: Alignment
                                                        //                                 .topLeft, // 渐变开始的位置
                                                        //                             end: Alignment
                                                        //                                 .bottomRight, // 渐变结束的位置
                                                        //                           ),
                                                        //                         ),
                                                        //                         child: Text(
                                                        //                           '取消',
                                                        //                           style: TextStyle(
                                                        //                               fontSize:
                                                        //                                   12,
                                                        //                               color:
                                                        //                                   Color(0XFFFFFFFF)),
                                                        //                         ),
                                                        //                       ),
                                                        //                     )
                                                        //                   ],
                                                        //                 )
                                                        //               ],
                                                        //             ),
                                                        //           )),
                                                        //     )
                                                        //   },
                                                        //   child: Image.asset(
                                                        //     'static/images/delimg.png',
                                                        //     width: 12,
                                                        //     fit: BoxFit.fitWidth,
                                                        //   ),
                                                        // ),
                                                      ],
                                                    ),
                                                    SizedBox(
                                                      height: 5,
                                                    ),
                                                    // Text(
                                                    //   '展开8条回复',
                                                    //   style: TextStyle(
                                                    //       fontSize: 12,
                                                    //       color: Color(0XFF0A72D9)),
                                                    // ),
                                                  ],
                                                ))
                                              ],
                                            )
                                        ],
                                      ))
                                    ],
                                  ),
                                )
                                .toList()))
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
                color: Color(0XFFFFFFFF),
                padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
                child: Obx(
                  () => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                          child: Container(
                        alignment: Alignment.center,
                        height: 35,
                        decoration: BoxDecoration(
                            color: Color(0XFFF3F3F3),
                            borderRadius: BorderRadius.circular(35)),
                        child: TextField(
                          controller: _controller,
                           focusNode: _focusNode,
                          onChanged: (value) {
                            sendValue.value = value;
                          },
                          style: TextStyle(fontSize: 12, height: 1.0), // 关键修改点

                          decoration: InputDecoration(
                            isCollapsed: true, //设置高度
                            contentPadding: EdgeInsets.all(12),
                            hintStyle: TextStyle(
                                color: Color(0xff999999),
                                fontSize: 12,
                                height: 1),
                            border: InputBorder.none, // 隐藏输入框默认边框
                            hintText:sendItem.isNotEmpty ? '回复：${sendItem['name']}':'说点什么...'
                            // '说点什么...'
                            , // 提示文本
                          ),
                        ),
                      )),
                      SizedBox(
                        width: 10,
                      ),
                      sendValue.value.isNotEmpty
                          ? GestureDetector(
                              onTap: () {
                                sendComment();
                              },
                              child: Container(
                                alignment: Alignment.center,
                                padding: EdgeInsets.symmetric(horizontal: 15),
                                height: 30,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular((15)),
                                  gradient: LinearGradient(
                                    colors: [
                                      Color(0xff2189E7),
                                      Color(0xffBF67F8),
                                    ], // 定义颜色列表
                                    begin: Alignment.topLeft, // 渐变开始的位置
                                    end: Alignment.bottomRight, // 渐变结束的位置
                                  ),
                                ),
                                child: Text('确定',
                                    style: TextStyle(
                                        fontSize: 12,
                                        color: Color(0XFFFFFFFF))),
                              ),
                            )
                          : 

                          Row(
                              children: [
                                Image.asset(
                                  'static/images/hongxin.png',
                                  width: 15,
                                  fit: BoxFit.fitWidth,
                                ),
                                SizedBox(
                                  width: 3,
                                ),
                                Text(
                                  '${Get.parameters['up_count']}',
                                  style: TextStyle(fontSize: 12),
                                ),
                                SizedBox(
                                  width: 10,
                                ),
                                Image.asset(
                                  'static/images/liekai.png',
                                  width: 15,
                                  fit: BoxFit.fitWidth,
                                ),
                                SizedBox(
                                  width: 3,
                                ),
                                Text(
                                  '${Get.parameters['down_count']}',
                                  style: TextStyle(fontSize: 12),
                                ),
                                SizedBox(
                                  width: 10,
                                ),
                              ],
                            )

                      // Get.parameters['is_up'] == 'true' &&
                      //         !sendValue.value.isNotEmpty
                      //     ? Row(
                      //         children: [
                      //           Image.asset(
                      //             'static/images/hongxin.png',
                      //             width: 15,
                      //             fit: BoxFit.fitWidth,
                      //           ),
                      //           SizedBox(
                      //             width: 3,
                      //           ),
                      //           Text(
                      //             '${Get.parameters['up_count']}',
                      //             style: TextStyle(fontSize: 12),
                      //           ),
                      //           SizedBox(
                      //             width: 10,
                      //           ),
                      //         ],
                      //       )
                      //     : SizedBox(),

                      // Get.parameters['is_down'] == 'true'
                      //  &&!sendValue.value.isNotEmpty
                      //     ? Row(
                      //         children: [
                      //           Image.asset(
                      //             'static/images/liekai.png',
                      //             width: 15,
                      //             fit: BoxFit.fitWidth,
                      //           ),
                      //           SizedBox(
                      //             width: 3,
                      //           ),
                      //           Text(
                      //             '${Get.parameters['down_count']}',
                      //             style: TextStyle(fontSize: 12),
                      //           ),
                      //           SizedBox(
                      //             width: 10,
                      //           ),
                      //         ],
                      //       )
                      //     : SizedBox(),

                          
                      // Get.parameters['is_down'] == 'false' &&
                      //         Get.parameters['is_up'] == 'false' &&
                      //         !sendValue.value.isNotEmpty
                      //     ? Row(
                      //         children: [
                      //           Image.asset(
                      //             'static/images/hongxin.png',
                      //             width: 15,
                      //             fit: BoxFit.fitWidth,
                      //           ),
                      //           SizedBox(
                      //             width: 3,
                      //           ),
                      //           Text(
                      //             '${Get.parameters['up_count']}',
                      //             style: TextStyle(fontSize: 12),
                      //           ),
                      //           SizedBox(
                      //             width: 10,
                      //           ),
                      //           Image.asset(
                      //             'static/images/aixin.png',
                      //             width: 15,
                      //             fit: BoxFit.fitWidth,
                      //           ),
                      //           SizedBox(
                      //             width: 3,
                      //           ),
                      //           Text(
                      //             '${Get.parameters['down_count']}',
                      //             style: TextStyle(fontSize: 12),
                      //           ),
                      //           SizedBox(
                      //             width: 10,
                      //           ),
                      //         ],
                      //       )
                      //     : SizedBox()
                    ],
                  ),
                ))
          ],
        ),
        )
        );
  }

  
}
